<script setup lang="ts">
import ThreeDiv from "@/Components/ThreeDiv.vue";
import ThreeButton from "@/Components/ThreeButton.vue";
import UndoRedoSearch from "@/Components/UndoRedoSearch.vue";
import ChildBoth from "@/Components/ChildBoth.vue";
import SongBottom from "@/Components/SongBottom.vue";
import LeftList from "@/Components/LeftList.vue";
import RightUserPhoto from "@/Components/RightUserPhoto.vue";
import SongList from "@/Components/SongList.vue";
import {ref} from "vue";

let songCount = ref(0);
const emit = defineEmits(['page-to-send', 'display-song', 'display-song-list'])
const handleChildData = (data:number) => {
  songCount.value= data;
};

function setDisplaySong(displaySong:any){
  /*console.log("mylovepage中的displaySong为"+displaySong.toString())*/
  emit('display-song',displaySong)
}

function setDisplaySongList(displaySongList:any){
  /*console.log("mylovepage中的displaySongList为"+displaySongList.toString())*/
  emit('display-song-list',displaySongList)

}
const pageName = "MyLovePage"
function getLoveSongNum(loveSongNum){
  songCount.value = loveSongNum
}
</script>

<template>
  <div class="fixed   w-200 h-45  pic z--1 top-20 left-160 opacity-23"></div>
  <child-both></child-both>
  <song-bottom class="pl-30 pr-35" :pageName="pageName"></song-bottom>
  <div class="body flex">
    <left-list></left-list>
    <div class="main grow h-200 flex flex-col overflow-auto pb-15 mx-3 ">
      <undo-redo-search></undo-redo-search>
      <div class="h-50 flex flex-col gap-5 mt-16.5 ml-5">
        <div class="flex items-center">
          <img class="  w-70  h-auto" src="../img/t-我喜欢.png"/>
          <div class="text-4xl ml--17 font-bold text-gray-5" >({{ songCount }})</div>
        </div>
        <three-div></three-div>
        <three-button></three-button>
        <song-list class="px-5 ml-2 pb-32" :pageName="pageName" @love-song-num="getLoveSongNum"
                   :key="new Date().getTime()"
        ></song-list>

      </div>


    </div>
    <right-user-photo></right-user-photo>
  </div>




<!--  </div>-->
</template>

<style scoped>
div::-webkit-scrollbar {
  display: none;
}
.pic {
  /*此三个样式组合，可以保证背景图片充满整个容器. 貌似单独写在组件的style里面不生效。*/
  background-image: url(../img/child-six.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
</style>